<template>
    <div>
        <echartsLayout :formState="false" :tableState="false">
            <div slot="form">
                <el-form :model="query" ref="form" label-width="70px" label-position="right" >
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="科目" prop="subjectId">
                               <el-select v-model="query.subject" placeholder="请选择科目" style="width:100%" >
                                    <el-option
                                        v-for="item in subjectList"
                                        :key="item.id"
                                        :label="item.summaryName"
                                        :value="item.summaryName">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="时间范围" prop="timeId" >
                                <el-select v-model="query.timeId" placeholder="请选择时间范围" style="width:100%" >
                                    <el-option
                                        v-for="item in timeList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                             <div class="btn-query">
                                <el-button type="primary" class="btn-common" @click="queryData">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div>
            <!--表格 start-->
            <div slot="table">
                <div class="table-title">
                    <!-- <el-button @click="exportExcel" class="btn-common">导出</el-button> -->
                    <export-excel :jsonStr="jsonStr"></export-excel>

                </div> 
                <el-table :data="dateList" border v-loading="loading" style="width: 100%"   @sort-change="sortTable">
                    <el-table-column label="正确率" align="center" prop="accuracy" sortable="custom">
                        <template scope="scope">
                            <span>{{parseInt(scope.row.accuracy*100) +'%' | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="练习次数" align="center" prop="questions" sortable="custom">
                        <template scope="scope">
                            <span>{{scope.row.questions | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="知识点" align="center">
                        <template scope="scope">
                            <span>{{scope.row.knlName | isNull}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="科目" align="center">
                        <template scope="scope">
                            <span>{{scope.row.subject | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="教材" align="center">
                        <template scope="scope">
                            <span>{{scope.row.book | isNull}}</span>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column label="年级" align="center">
                        <template scope="scope">
                            <span>{{scope.row.grade | isNull}}</span>
                        </template>
                    </el-table-column> -->

                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            <!--表格 end-->
        </echartsLayout>
    </div>
</template>

<script>
import moment from 'moment';
import exportExcel from 'components/ExportExcel/index';
import { queryTable, listSubject } from 'api/common.js'
import { mapState, mapActions } from 'vuex';
import echartsLayout from 'components/TableLayout/echartsLayout'; 

export default {
    name: 'weaknessKnowledgeList',
    components: {echartsLayout, exportExcel},
    data() {
        return {
            subjectList: [],
            timeList: [
                {
                    id: 0,
                    name: '本月'
                },
                {
                    id: 1,
                    name: '三个月'
                }, 
                {
                    id: 2,
                    name: '半年内'
                },
                {
                    id: 3,
                    name: '本年'
                }
                
            ],
            query: {
                subject: '', // 科目
                timeId: 0, // 时间范围
                startDate: '',
                endDate: ''   
            },
            dateList: [],
            pageQuery: {
                total: 0,
                currentpage: 1
            },
            loading: false, // 表格加载,默认要为true
            sortType: '',
            isDesc: true,
            jsonStr: null
            
        }
    }, 
    created() {
        this.queryData();
        this.getListSubject();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.queryData();
        },

        // 获取科目名称
        getListSubject() {
            listSubject().then(res => {
                this.subjectList = res.data.content;
                this.subjectList.unshift({
                    createTime: '',
                    summaryCode: '',
                    summaryKey: '',
                    summaryMark: '',
                    summaryName: '请选择'
                })
            })
        },

        // 查询
        queryData() {
            this.loading = true;
            this.setStartEndDate(); // 计算开始时间和结束时间
            let queryId = 200;
            let showList = false;
            let realTime = true;
            let type = 'event';
            this.sortType = this.sortType=== ''?'accuracy':this.sortType;
            let query = {
                'order_field': this.sortType,
                'order_desc': this.isDesc, 
                'subject': this.query.subject ==='' || this.query.subject ==='请选择'?undefined:this.query.subject, 
                'from_date': this.query.startDate, 
                'to_date': this.query.endDate
            };
            queryTable(query, queryId, this.pageQuery.currentpage, this.config.pageSize, showList, type, realTime).then(response => {
                this.loading = false;
                if (response.data.content) {
                    this.dateList = response.data.content.rows;
                    this.pageQuery.total = response.data.content.total_rows;
                }
            }).catch(() => {
                this.loading = false;
            });

            // 导出
            let file_name ='薄弱知识点';
            let field_names = [['正确率', 'accuracy', 'percent'], ['练习次数', 'questions'], ['知识点', 'knlName'], ['科目', 'subject'], ['教材', 'book']];
            this.jsonStr = {
                query_id: queryId,
                real_time: realTime,
                query,
                show_list: showList,
                file_name,
                field_names
            }
        },
        

        // 计算开始时间和结束时间
        setStartEndDate() {
            this.query.endDate = moment().format('YYYY-MM-DD');
            if (this.query.timeId === 0) { // 本月
                this.query.startDate = moment().startOf('month').format('YYYY-MM-DD'); 
            } else if (this.query.timeId === 1) { // 三个月
                this.query.startDate = moment().subtract('month', 3).format('YYYY-MM-DD'); 
            } else if (this.query.timeId === 2) { // 半年内
                this.query.startDate = moment().subtract('month', 6).format('YYYY-MM-DD'); 
            } else if (this.query.timeId === 3) { // 本年
                this.query.startDate = moment().startOf('year').format('YYYY-MM-DD');
            }
        },

        // 表格排序
        sortTable(params) {
            this.sortType = params.prop;
            params.order === 'ascending'?this.isDesc = false:this.isDesc = true;
            this.queryData();
        }
    }
}
</script>

<style lang="scss" scoped>
.btn-query{
    float:right;
}
</style>